<template>
    <ContentBase>
        <ul class="nav nav-tabs" style="margin-bottom: 20px;">
            <li class="nav-item position-relative">
                <router-link :class="route_name == 'pending' ? 'nav-link active' : 'nav-link'" :to="{name: 'pending'}">待处理</router-link>
                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" v-if="$store.state.user.repair_count !== 0">
                    {{ store.state.user.repair_count }}
                </span>
            </li>
            <li class="nav-item">
                <router-link :class="route_name == 'processed' ? 'nav-link active' : 'nav-link'" :to="{name: 'processed'}">已处理</router-link>
            </li>
        </ul>
        <router-view />
    </ContentBase>
</template>

<script setup>
import ContentBase from '../components/ContentBase';
import { useRoute } from 'vue-router';
import { computed } from 'vue';
import { useStore } from 'vuex';

const route = useRoute();
const store = useStore();
let route_name = computed(() => route.name);

</script>

<style scoped>

</style>